<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="/socket.io.js"></script>
</head>

<body>
    <input type="text" id='aa'>
    <button id='send'> 发送</button>
    <div id='aaa'></div>
</body>
<script>
    function showmessage(str, type) {
        let div = document.createElement('div')
        div.innerHTML = str
        if (type == 'enter') {
            div.style.color = 'blue'
        } else if (type == 'leave') {
            div.style.color = 'red'
        }
        else if (type == 'message') {
            div.style.color = 'green'
        }
        document.body.append(div)
    }
    var ws = io("ws://localhost:2000/");// 设置服务器地址 //

    document.getElementById('send').onclick = function () {
        let txt = document.getElementById('aa').value
        ws.emit('message', txt);
    }
    ws.on('enter', function (data) {
        showmessage(data, 'enter')
    })
    ws.on('message', function (data) {
        showmessage(data, 'message')
    })
    ws.on('leave', function (data) {
        showmessage(data, 'leave')
    })
</script>

</html>